<template>
  <div class="top-bar header">
    <div style="display: flex;flex-direction: row;align-items: center">
      <el-image @click="index"
                style="width: 30px; height: 30px;border-radius: 100%;vertical-align: middle"
                :src="url"
      ></el-image>
      <span style="padding-left: 5px;padding-right:5px;font-size: 15px">
        <el-button size="small" @click="toSearch" round :icon="Search">搜索</el-button>
      </span>
      <el-button @click="toCategories" round>分类</el-button>
      <div style="width: 5px"></div>
    </div>
    <div v-if="!getStatus">
      <el-button @click="toLogin" round>登录</el-button>
      <el-button @click="toRegister" round>注册</el-button>
    </div>
    <div style="align-items: center" v-if="getStatus">
      <el-dropdown :hide-on-click="true">
        <p style="font-size: 16px">{{ getName }}</p>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import logo from '@assets/logo.png'
import {Search} from '@element-plus/icons-vue'

export default {
  name: "Header",
  data() {
    return {
      url: logo,
      login: this.getStatus,
      name: this.getName,
      Search: Search
    }
  },
  computed: {
    getStatus() {
      return this.$store.state.user.status
    },
    getName() {
      return this.$store.state.user.name
    }
  },
  created() {

  },
  methods: {
    toLogin() {
      this.$router.push("/login")
    },
    toRegister() {
      this.$router.push("/register")
    },
    index() {
      this.$router.push("/")
    },
    toUser() {
      this.$router.push("/center")
    },
    toCategories() {
      this.$router.push("/categories")
    },
    toSearch() {
      this.$router.push("/search")
    },
    logout() {
      this.$store.dispatch('Logout').then(() => {
        location.reload()
      })
    }
  }
}
</script>

<style scoped>
.top-bar {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: 0 5px 5px -6px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  align-items: center;
  padding: 10px 0;
  opacity: 1;
}
</style>
